<template>
	<u-input 
		v-model="inputValue" 
		:type="type" 
		:clearable="clearable" 
		:border="border"
		:borderColor="currentThemeObj.inputBorderColor" 
		:placeholder="placeholder" 
		:maxlength="maxlength"
		:height="height"
		@input="getChange"
		:autoHeight="autoHeight"
		:custom-style="customStyle"
		:placeholder-style="`color:${currentThemeObj.placeholderColor}`"/>
</template>

<script>
	export default {
		name:"itemInput",
		props: {
			value:{
				type:String,
				default:''
			},
			type: {
				type: String,
				default: 'text'
			},
			placeholder:{
				type: String,
				default: '请输入内容'
			},
			border:{
				type:Boolean,
				default:true
			},
			clearable:{
				type:Boolean,
				default:false
			},
			maxlength:{
				type:[String,Number],
				default:-1
			},
			height:{
				type:[String,Number],
				default:0
			},
			customStyle:{
				type:Object,
				default:()=>({})
			},
			autoHeight:{
				type:Boolean,
				default:true
			}
		},
		watch: {
			value(newValue) {
				this.inputValue = newValue
			}
		},
		data() {
			return {
				inputValue:""
			};
		},
		created() {
			this.inputValue = this.value;
		},
		methods: {
			getChange(val){
				this.$u.debounce(()=>{
					this.inputValue = val;
					this.$emit('input',this.inputValue)
				},50)
			}
		},
	}
</script>

<style lang="scss">

</style>
